<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">

  class A1 extends React.Component {

    constructor (props) {
      super(props)
    }

    componentWillReceiveProps () {
      console.log('A1 props 改变')
    }

    componentWillUnmount () {
      console.log('A1组件移除')
    }

    render () {
      return <div><h1>{this.props.msg}</h1>
        <button onClick={this.props.myEvent}>A1</button>
      </div>
    }
  }

  class A2 extends React.Component {

    constructor (props) {
      super(props)
    }

    componentWillReceiveProps () {
      console.log('A2 props 改变')
    }

    componentWillUnmount () {
      console.log('A2组件移除')
    }

    render () {
      return <div>
        <h1>{this.props.msg}</h1>
        <button onClick={this.props.myEvent}>A2</button>
      </div>
    }
  }

  class App extends React.Component {
    state = {
      isLogin: false,
      msg: '初始化'
    }
    updateState = () => {
      this.setState(
        {
          isLogin: !this.state.isLogin
        }
      )
    }
    updateMsg = () => {
      this.setState({
          msg: 'change msg'
        }
      )
    }

    render () {
      return <div>
        <h1>hello,world</h1>
        {this.state.isLogin ?
          <A1 msg={this.state.msg} myEvent={this.updateState}/> :
          <A2 msg={this.state.msg} myEvent={this.updateState}/>}
        <button onClick={this.updateMsg}>改变值</button>
      </div>
    }
  }

  ReactDOM.render(<App/>, document.getElementById('app'))
</script>
</body>
</html>
